<script setup>
import { onMounted } from "vue";
import { useRouter } from "vue-router";

defineOptions({
  name: "meHeader",
});

const router = useRouter();

onMounted(() => {
  console.log(props);
});

const props = defineProps({
  authorInfo: {
    default: {},
    type: Object,
  },
  hasFollow: {
    default: false,
    type: Boolean,
  },
  isMe: {
    default: false,
    type: Boolean,
  },
  articleNum: {
    default: 0,
    type: Number,
  },
});

const backAction = () => {
  router.back();
};

const toLeaveBoard = () => {
  router.push({
    name: "messageBoard",
    query: { user_id: props.authorInfo.user_id },
  });
};
</script>

<template>
  <div class="meHeader">
    <div class="me-content">
      <div class="back"><el-button @click="backAction">返回</el-button></div>
      <div class="name" v-if="authorInfo.user_name">
        {{ authorInfo.user_name }}
        <span class="email"> ({{ authorInfo.user_email }})</span>
      </div>
      <div class="article" v-if="articleNum">{{ articleNum }}篇笔记</div>
      <div class="leave" v-if="authorInfo.user_name" @click="toLeaveBoard">
        留言板
      </div>
      <div class="follow" v-if="authorInfo.user_name">
        <el-button
          v-if="!hasFollow && !isMe"
          color="#626aef"
          type="primary"
          @click="followAction"
        >
          关注</el-button
        >
        <el-button
          v-else-if="hasFollow && !isMe"
          color="#626aef"
          type="primary"
          @click="followAction"
        >
          <el-icon><Select /></el-icon> 已关注</el-button
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.meHeader {
  width: 100%;
  background-color: rgb(255, 255, 255);
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: #eee 0 3px 5px 0;
  transition: all ease 0.5s;

  .me-content {
    // width: 1300px;
    width: 90%;
    display: flex;
    align-items: center;

    .name {
      margin-left: 40px;
      font-size: 20px;
      font-weight: 600;

      .email {
        font-size: 13px;
        color: #ccc;
      }
    }

    .article {
      flex: 1;
      color: #8e8cd8;
      margin-left: 20px;
    }

    .leave {
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
</style>
